{% extends 'myhome/blank.html' %}
{% block con %}
<div id="breadcrumb">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="{% url 'myhome_index' %}">首页</a></li>
            <li class="active">我的购物车</li>
        </ul>
    </div>
</div>
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <form id="checkout-form" class="clearfix">
                <div class="col-md-6">
                    <div class="billing-details">
                        <div class="section-title">
                            <h3 class="title"><font style="vertical-align: inherit;"><font
                                    style="vertical-align: inherit;">收货信息</font></font></h3>
                        </div>
                        <div class="form-group">
                            <input class="input" type="text" required name="first-name" placeholder="收货人">
                        </div>
                        <div class="form-group">
                            <input class="input" type="tel" required minlength="11" maxlength="11" name="tel"
                                   placeholder="电话">
                        </div>
                        <div class="form-group">
                            <input class="input" type="text" required name="address" placeholder="地址">
                        </div>

                        <div class="form-group">
                            <div class="input-checkbox">
                                <input type="checkbox" id="register">
                                <label class="font-weak" for="register"><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">创建账户？</font></font></label>
                                <div class="caption">
                                    <p>
                                        <input class="input" type="password" name="password" placeholder="输入您的密码">
                                    </p></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="shiping-methods">
                        <div class="section-title">
                            <h4 class="title"><font style="vertical-align: inherit;"><font
                                    style="vertical-align: inherit;">运输方式</font></font></h4>
                        </div>
                        <div class="input-checkbox">
                            <input type="radio" name="shipping" id="shipping-1" checked="">
                            <label for="shipping-1"><font style="vertical-align: inherit;"><font
                                    style="vertical-align: inherit;">免费送货 - 0.00 人民币</font></font></label>
                        </div>
                        <div class="input-checkbox">
                            <input type="radio" name="shipping" id="shipping-2">
                            <label for="shipping-2"><font style="vertical-align: inherit;"><font
                                    style="vertical-align: inherit;">标准 - 4.00 人民币</font></font></label>
                        </div>
                    </div>

                    <div class="payments-methods">
                        <div class="section-title">
                            <h4 class="title"><font style="vertical-align: inherit;"><font
                                    style="vertical-align: inherit;">付款方式</font></font></h4>
                        </div>
                        <div class="input-checkbox">
                            <input type="radio" name="payments" id="payments-1" checked="">
                            <label for="payments-1"><font style="vertical-align: inherit;"><font
                                    style="vertical-align: inherit;">直接银行转账</font></font></label>
                        </div>
                        <div class="input-checkbox">
                            <input type="radio" name="payments" id="payments-2">
                            <label for="payments-2"><font style="vertical-align: inherit;"><font
                                    style="vertical-align: inherit;">支票付款</font></font></label>
                        </div>
                        <div class="input-checkbox">
                            <input type="radio" name="payments" id="payments-3">
                            <label for="payments-3"><font style="vertical-align: inherit;"><font
                                    style="vertical-align: inherit;">支付宝系统</font></font></label>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="order-summary clearfix">
                        <div class="section-title">
                            <h3 class="title">购物车</h3>
                        </div>
                        <table class="shopping-cart-table table">
                            <thead>
                            <tr>
                                <th class="product-thumbnail">
                                    <input type="checkbox" class="all">
                                </th>
                                <th>图片</th>
                                <th>书名</th>
                                <th class="text-center">单价</th>
                                <th class="text-center">数量</th>
                                <th class="text-center">小计</th>
                                <th class="text-right">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for i in user.cart_set.all %}
                            <tr>
                                <th class="product-thumbnail">
                                    <input type="checkbox" cartid="{{i.id}}">
                                </th>
                                <td class="thumb"><img src="/{{i.bid.bookimgs_set.first.img_url }}" alt=""></td>
                                <td class="details">
                                    <a href="#">{{i.bid.title}}</a>
                                </td>
                                <td class="price text-center">￥<strong class="amount">{{i.bid.price}}</strong><br>
                                    <del class="font-weak"><small>$40.00</small></del>
                                </td>
                                <td class="qty text-center">
                                    <input class="input" name="num" type="number" min="1" value="{{i.num}}">
                                    <input type="hidden" name="cartid" value="{{i.id}}">
                                </td>
                                <td class="total text-center">￥<strong class="primary-color">{% widthratio i.bid.price 1 i.num %}</strong></td>
                                <td class="text-right">
                                    <a href="javascript:void(0)" class="main-btn icon-btn"><i
                                            class="fa fa-close"></i></a>
                                </td>
                            </tr>
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            <tr class="cart-subtotal">
                                <th class="empty" colspan="4"></th>
                                <th>小计</th>
                                <th colspan="2" class="sub-total">￥<span class="amount">0.00</span></th>
                            </tr>
                            <tr>
                                <th class="empty" colspan="4"></th>
                                <th>快递</th>
                                <td colspan="2">免运费</td>
                            </tr>
                            <tr class="cart-subtotal">
                                <th class="empty" colspan="4"></th>
                                <th>合计</th>
                                <th colspan="2" class="total">￥<span class="amount">0.00</span></th>
                            </tr>
                            </tfoot>
                        </table>
                        <div class="pull-left">
                            <a class="primary-btn" href="/">继续购物</a>
                        </div>
                        <div class="pull-right">
                            <button id="addorder" class="primary-btn">提交订单</button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>

<script src="/static/myhome/assets/js/jquery-1.12.4.min.js"></script>
<script>
	$('#addorder').click(function(){
		// 获取当前已经选中的购物车商品的id
		var res = TotalPrice()
		if (res.length){

		}else{
			alert('请选择想购买商品')
		}
	})

	// 全选
	$('input[type=checkbox]').click(function(){
		if ($(this).attr('class')=='all'){
			// 所有的选框设置状态
			$('input[type=checkbox]').prop('checked', this.checked)
		}
		TotalPrice()
	})

	// 计算合计价格
	function TotalPrice(){
		var total = 0
		var cartids = []
		$('input[type=checkbox]').each(function(){
			if ($(this).prop('checked')){
				var xj = Number($(this).parents('tr').find('.primary-color').text())
				total += xj
				// 获取当前选中的ID
				cartid = $(this).attr('cartid')
				if (cartid){
					cartids.push(cartid)
				}
			}
		})

		$('.cart-subtotal').find('.amount').text(returnFloat(total))
		return cartids
	}
	// 购物车数量
	$('input[name=num').blur(function(){
		// 获取当前元素的值
		var data = {}
		data['n'] = Number($(this).val())
		data['cartid'] = $(this).next().val()
		var price =  Number( $(this).parents('tr').find('.amount').text())

		$.get("{% url 'myhome_edit' %}",data,function(sdata){
			if (sdata['code']){
				alert(sdata['msg'])
			}else{
				var x = data['n']*price
				console.log(x)
			}
		},'json')

	})
	
	$('.text-right a').click(function(){
		var res = confirm('是否确认删除购物车商品？')
		var $this =  $(this)
		if (res){
			var cartid = $(this).parents('tr').find('input[name=cartid]').val()
			// console.log(cartid)

			$.get("{% url 'myhome_delete' %}",{'cartid':cartid},function(data){
				if (data['code']){
					alert(data['msg'])
				}else{
					$this.parents('tr').remove()
				}
			},'json')
		}

	})

	function returnFloat(value){
		var value = Math.round(parseFloat(value)*100)/100;
		var xsd=value.toString().split(".");
		if (xsd.length == 1){
			value=value.toString()+".00";
			return value;
		}
		if (xsd.length>1){
			if (xsd[1].length<2){
				value=value.toString()+'0';
			}
			return value;
		}
	}


</script>

{% endblock %}